<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="box_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from '@antv/data-set';
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
        { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },
        { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },
        { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },
        { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },
        { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },
        { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
        { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 }
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { x: 'Oceania2', low: 3, q1: 12, median: 18, q3: 20, high: 28 },
        { x: 'East Europe2', low: 5, q1: 7, median: 10, q3: 16, high: 32 },
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "box_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表赋值
    this.chart.data(this.transformData(this.dataList));
    // 设置度量
    this.chart.scale({
      'range':{
        nice:true,
        alias: "销售量",
      }
    });
    // 设置坐标轴，添加标题
    this.chart.axis("range", {
      // 设置 title , 当前 title 的内容为键值 nums，因为 nums 设置了别名所以显示销售量
      title: {
        // 文字样式
        style: {
          fontSize: 16, // 文本大小
          textAlign: "center", // 文本对齐方式
        },
        // 文字偏移量
        offset: 60,
      },
    });
    // 自定义提示框样式
    this.chart.tooltip({
      // 不显示title
      showTitle: false,
      // 不显示标记点
      showMarkers: false,
      // 自定义模板
      itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">'
        + '<div style="padding-bottom:8px;"><span style="background-color:{color};" class="g2-tooltip-marker"></span>'
        + '{name}</div>'
        + '<div style="padding-bottom:4px;text-align: left;">最大值：{high}</div>'
        + '<div style="padding-bottom:4px;text-align: left;">上四分位数：{q3}</div>'
        + '<div style="padding-bottom:4px;text-align: left;">中位数：{median}</div>'
        + '<div style="padding-bottom:4px;text-align: left;">下四分位数：{q1}</div>'
        + '<div style="padding-bottom:4px;text-align: left;">最小值：{low}</div>'
        + '</li>'
    });
    // 映射图形
    // schema 表示的是自定义图形，自定义图形必须要定义 shape 。对应自定义图形提供了一些常用的图形
    this.chart
        .schema()
        .position("x*range")
        .shape('box')
        .tooltip('x*low*q1*median*q3*high', (x, low, q1, median, q3, high) => {
          return {
            name: x,
            low,
            q1,
            median,
            q3,
            high
          };
        })
        .style({
          stroke: '#545454',
          fill: '#1890FF',
          fillOpacity: 0.3
        })
    // 渲染图表
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData( this.transformData(newValue) );
    },
  },
  methods:{
    // 数据转换
    transformData(data){
      const dv = new DataView().source(data);
      dv.transform({
        type:'map',
        callback(obj){
          obj.range = [obj.low,obj.q1,obj.median,obj.q3,obj.high];
          return obj
        }
      })
      return dv.rows
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>